<template>
  <ul class="item-container clearfix">
    <li v-for="(temp, index) in floorData" :key="'miva' + index" class="item-box">
      <div class="img-box">
        <img :src="temp.img" alt>
      </div>
      <div class="info-box">
        <div class="title">《{{temp.title}}》</div>
        <div class="txt">{{temp.txt}}</div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
    props: {
        floorData: {
            type: Array,
            default() {
                return [
                    {img: require('@/assets/img/ceshi.png'), title: '标题标题标题标题', txt: '内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情'},
                    {img: require('@/assets/img/ceshi1.png'), title: '标题', txt: '内容详情'},
                    {img: require('@/assets/img/ceshi2.png'), title: '标题', txt: '内容详情'},
                    {img: require('@/assets/img/ceshi.png'), title: '标题', txt: '内容详情'},
                    {img: require('@/assets/img/ceshi1.png'), title: '标题', txt: '内容详情'},
                    {img: require('@/assets/img/ceshi2.png'), title: '标题', txt: '内容详情'},
                    {img: require('@/assets/img/ceshi.png'), title: '标题', txt: '内容详情'},
                    {img: require('@/assets/img/ceshi1.png'), title: '标题', txt: '内容详情'},
                ]
            }
        }
    }
}
</script>


<style lang="less" scoped>

.item-box {
  width: 25%;
  height: 0;
  padding-bottom: 25%;
  position: relative;
  float: left;
  &:hover .info-box {
    display: block;
  }
  &:hover .img-box::after {
      height: 100%;
  }
  @media (max-width: 768px) {
      & {
          width: 50%;
          padding-bottom: 50%;
      }
  }
}
.img-box {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  // overflow: hidden;
  &::after {
      content: '';
      display: block;
      height: 0%;
      width: 101%;
      background: rgba(0, 0, 0, .5);
      position: absolute;
      top: 0;
      left: -1px;
      transition: all .3s;
  }
  img {
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%)
  }
}
.info-box {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 14px;
  color: #fff;
  .title {
    font-size: 20px;
    white-space: nowrap;
  }
  .txt {
      padding: 10px;
  }
}

</style>



